import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'],
      resolvers: [VantResolver()]
    }),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  server: {
    port: 3000,
    host: '0.0.0.0',
    open: true
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/common/scss/_var.scss";@use "@/common/scss/_mixin.scss";@use "@/common/scss/_border.scss";`
      }
    },
    postcss: {
      // ⚠️关键代码
      plugins: [
        postCssPxToRem({
          // 自适应，px>rem转换
          //  rootValue: 36, // 1rem的大小
          rootValue({ file }) {
            return file!.indexOf('vant') !== -1 ? 37.5 : 36
          },
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          // selectorBlackList: ["html"],
          // minPixelValue: 1.5,
          // mediaQuery: false,
          exclude: 'common'
        }),
        autoprefixer({
          // 自动添加前缀
          overrideBrowserslist: [
            'Android 4.1',
            'iOS 7.1',
            'Chrome > 31',
            'ff > 31',
            'ie >= 8'
            //'last 2 versions', // 所有主流浏览器最近2个版本
          ],
          grid: true
        })
      ]
    }
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})
